﻿
@{
    ViewBag.Title = "EmployeePageList";
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
@section css{
    <link rel="stylesheet" href="~/assets/portal/assets/css/common.css" />
    <link rel="stylesheet" href="~/bussiness/js/base/reset.css" />
    <style>
        .ant-select-arrow, .ant-select-clear {
            position: absolute;
            right: 10px;
        }


        .stable {
            border-collapse: collapse; /* 折叠边框，使之变为单一线划分 */
            border: 1px solid #e1e5ea; /* 设置表格、表头、单元格边框 */
            width: 100%;
            margin-top:20px;
            max-height:800px;
            overflow-y:scroll;
        }
            .stable th {
                background: #f2f6f9;
                font-size: 14px;
                font-weight: 600;
            }
            .stable th, .stable td {
                border: 1px solid #e1e5ea; /* 设置表格、表头、单元格边框 */
                text-align: center;
                height: 48px;
            }
    </style>
}
<div id="PPEProtectionConfig" class="font-['SourceHanSansSC']">
    <a-style-provider hash-priority="high">
        <a-config-provider :locale="vlocale">

            <header class="px-5 box-border">
         
                <div class="flex items-center">
                    <div class="w-full h-[48px] text-[13px]  rounded-lg mx-auto my-[10px]  bg-white  text-[#888888] text-3xl flex items-center px-10">   <div class="w-22 h-22 bg-blue-200 mr-5"> <img class="w-full h-full cursor-pointer" v-on:click="PPEProtectionConfigParams.vvback()" src="~/Assets/nimgs/exit.png" alt="返回" /></div> <span class="text-[]">信息门户<span class="mx-2">/</span>劳防用品<span class="mx-2">/</span><span class="text-[#424758] text-[15px]">防护配置</span> </span>  </div>
                </div>
                <div style="padding:20px;padding-top:16px; border-radius:10px; box-sizing:border-box" class="w-full h-min-[108px]  bg-white">
                    <div class="mb-5 text-[16px] font-bold text-black">筛选条件</div>
                    <a-row>
                        <a-form layout="inline"
                                :model="PPEProtectionConfigParams.queryParams.value">
                            <a-form-item label="工种">
                                <a-select ref="select" allow-clear
                                          placeholder="请选择工种"
                                          :options="PPEProtectionConfigParams.typeList.value"
                                          v-model:value="PPEProtectionConfigParams.queryParams.value.JobTypeId"
                                          style="width:150px">
                                </a-select>
                            </a-form-item>
                            <a-form-item>
                                <a-col><a-button v-on:click="PPEProtectionConfigParams.handleQuery" type="primary">查询</a-button></a-col>
                            </a-form-item>
                        </a-form>
                    </a-row>
                    <a-modal v-model:open="PPEProtectionConfigParams.templateOpen.value" width="70%" height="500px" :title="{0:'新增防护配置',1:'编辑防护配置',2:'防护配置详情'}[PPEProtectionConfigParams.opType.value]" v-on:ok="PPEProtectionConfigParams.subProConfig">
                        <a-form-item style="margin:20px 0" label="工种">
             
                            <a-select v-model:value="PPEProtectionConfigParams.editInfo.value.type"
                                      show-search
                                      placeholder="请选择工种"
                                      :disabled="PPEProtectionConfigParams.opType.value!=0"
                                      style="width: 200px"
                                      :options="PPEProtectionConfigParams.editInfo.value.options"
                                      :filter-option="PPEProtectionConfigParams.filterOption"
                                      v-on:change="PPEProtectionConfigParams.handleTypeChange"></a-select>
                        </a-form-item>
                            <div> <a-button v-if="PPEProtectionConfigParams.opType.value==0" v-on:click="PPEProtectionConfigParams.clearConfig">清空全部</a-button></div>

                            <div class="box" style="max-height:600px;overflow-y:scroll">
                                <table class="stable">
                                    <tr>
                                        <th>类型</th>
                                        <th>劳防用品</th>
                                        @*<th>类型</th>*@
                                        <th>更换频次(天)</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr v-for="(e,i) in PPEProtectionConfigParams.editInfo.value.tableInfo">

                                        <td>
                    <a-select v-model:value="e.type"
                      show-search
                      placeholder="请选择类型"
                      style="width: 200px"
                                :disabled="PPEProtectionConfigParams.opType.value!=0"
                      :options="PPEProtectionConfigParams.tabList.value"
                      :filter-option="PPEProtectionConfigParams.filterOption"
                          v-on:change="PPEProtectionConfigParams.handleTypeChange($event,i)"></a-select>
                             </td>
                                        <td>
                                            <a-select v-model:value="e.name"
                                                      show-search
                                                      placeholder="请选择劳防用品"
                                                      style="width: 200px"
                                                      :disabled="PPEProtectionConfigParams.opType.value!=0"
                                                      :options="e.lfoptions"
                                                      :filter-option="PPEProtectionConfigParams.filterOption"
                                                      ></a-select>
                                        </td>

                                        <td><a-input-number v-model:value="e.day" :disabled="PPEProtectionConfigParams.opType.value==2" v-on:blur="PPEProtectionConfigParams.cday(e,i)" min="0" /></td>
                                        <td v-if="PPEProtectionConfigParams.opType.value!=2">
                                            <div v-if="i==0&&PPEProtectionConfigParams.opType.value==0">
                                                <a-button :disabled="PPEProtectionConfigParams.opType.value!=0" v-on:click="PPEProtectionConfigParams.addConfig" type="primary">新增</a-button>

                                            </div>

                                            <a-popconfirm title="确认删除此用品?"
                                                          ok-text="确定"
                                                          cancel-text="取消"
                                                          v-on:confirm="PPEProtectionConfigParams.delConfig(e,i)">
                                                <a-button v-if="i!==0||PPEProtectionConfigParams.opType.value!=0" type="primary" danger>删除</a-button>
                                            </a-popconfirm>

                                        </td>
                                    </tr>

                                </table>
                            </div>
                    </a-modal>


                    <div class="flex w-full mt-10">
                        <a-card :bordered="true" class="w-full  mt-12">
                            <template #title>
                                <div class="w-full flex justify-between items-center">
                                    <div class="flex items-center"> <div>防护配置</div> <div class="ml-7"><a-tag color="#108ee9">总数:{{PPEProtectionConfigParams.pagination.value.total}}</a-tag></div></div>

                                    <a-button v-on:click="PPEProtectionConfigParams.addProConfig" type="primary">新增</a-button>
                                </div>



                            </template>


                            <a-table :pagination="PPEProtectionConfigParams.pagination.value" :loading="PPEProtectionConfigParams.pagination.value.loading" v-on:change="PPEProtectionConfigParams.handleTableChange" :data-source="PPEProtectionConfigParams.dataSource.value" :columns="PPEProtectionConfigParams.columns.value">

                            </a-table>

                        </a-card>

                    </div>

                </div>
            </header>
        </a-config-provider>
    </a-style-provider>
</div>
@section Js{
    <script src="~/bussiness/js/base/tailwind.js"></script>
    <script type="module">
        import Composition from '../../bussiness/js/pg/PPE/ProtectionConfig.js?v=@DateTime.Now.ToString("yyyyMMddHHmm")'
        import localeValues from '../../Bussiness/js/base/es/locale/zh_CN.js'
        singalApp('PPEProtectionConfig', Composition, localeValues)
    </script>
}
